<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-25 10:42:17
 * @LastEditTime: 2019-09-29 11:39:28
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div>
        <div class="header">
            <div class="my">
                <div class="left">
                    <!-- <p @click="loadTo" v-if="!user.custImg" style="position:relative;top:100rpx;">点击登录~~</p> -->
                    <img :src="userInfo.headImg||'/static/images/define_avatar.png'" alt="" >
                    <p @click="toPay">{{userInfo.balance/100>=0?'0':'--'}}元</p>
                    <span @click="toPay">--</span>
                </div>
                <div class="right">
                    <h4 v-if="userInfo.nickName">{{userInfo.nickName}}</h4>
                    <button v-else class="toLogin" @getuserinfo="toLogin" open-type="getUserInfo">登录/注册</button>
                    <p @click="coupon">{{userInfo.couponCount>=0?'0':'--'}}张</p>
                    <span @click="coupon">--</span>
                </div>
            </div>
        </div>

        <div class="list">
            <ul>
                <li @click="inviteFriends">
                    <img src="/static/images/intivi.png" alt="">
                    <span>邀请好友</span>
                    <img src="/static/images/toRight.png" class="right" alt="" srcset="">
                </li>
                <li @click="zx">
                    <img src="/static/images/zx.png" alt="">
                    <span>咨询管理</span>
                    <img src="/static/images/toRight.png" class="right" alt="" srcset="">
                </li>
                <li @click="clearCache">
                    <img src="/static/images/clean.png" alt="">
                    <span>清除缓存</span>
                    <img src="/static/images/toRight.png" class="right" alt="" srcset="">
                </li>
                <li @click="help">
                    <img src="/static/images/help.png" alt="">
                    <span>帮助</span>
                    <img src="/static/images/toRight.png" class="right" alt="" srcset="">
                </li>
            </ul>          
        </div>
    </div>
</template>


<script>
let apis = require('../../utils/api').default
let utliy = require('../../utils/util').default
export default {
    data(){
        return {
            userInfo:wx.getStorageSync('userInfo')
        }
    },



    methods:{
        // 去登陆
        toLogin(){
            const _this = this
            wx.login({
                success(res){
                    const code = res.code
                    wx.getUserInfo({
                        lang:"zh_CN",
                        success(res){
                            const userInfo = res.userInfo
                            userInfo.code = code
                            apis.updateUser(userInfo,function(res){
                                // // 临时用
                                // res.custId = '46xq2d2jaf'
                                // res.openId = '46xq2d2jaf'
                                // 临时用
                                _this.$set(_this,'userInfo',res)
                                wx.setStorageSync("userInfo",res)
                                wx.showToast({
                                    title: '成功',
                                    icon: 'success',
                                    duration: 2000
                                })
                            })
                        },
                        fail(res){
                            console.log(res)
                        }
                    })
                }
            })
        },
        //咨询
        zx(){
            wx.showToast({
                title:'咨询管理功能未上线，敬请期待',
                icon: 'none',
                duration: 2000
            })
            return false  
        },
        //跳转到充值页面
        toPay(){
            this.subWash()
        },
        //代洗
        subWash(){
            wx.showToast({
                title:'敬请期待',
                icon: 'none',
                duration: 2000
            })
            return false
        },
        // 清除缓存
        clearCache(){
            this.$set(this,'userInfo',{})
            wx.setStorageSync("userInfo",{})
            wx.showToast({
                title: '清除成功',
                icon: 'success',
                duration: 2000
            })
        },
        // 优惠券
        coupon(){
            this.subWash()
        },
        // 充值记录
        payRecord(){
            this.subWash()
        },
        // 洗车记录
        washRecord(){
            this.subWash()
        },
        // 邀请好友
        inviteFriends(){
            this.subWash()
        },
        // 帮助
        help(){
            this.subWash()
        }
    }
}
</script>



<style lang="less">
body{
    background: #f0eff5;
}
.header{
    background: white;
    padding-bottom: 20rpx;
    
    h1{
        text-align: center;
        font-size: 36rpx;
        color: #020202;
    }
    .my{
        overflow: hidden;
        width: 90%;
        margin-left: 5%;
        .left{
            display: inline-block;
            float: left;
            text-align: center;
            img{
                width: 140rpx;
                height: 140rpx;
                margin-bottom: 46rpx;
                border-radius: 100%;
            }
            p{
                font-size: 32rpx;
                color:#e93746;
                font-weight: bold;
            }
            span{
                font-size: 28rpx;
                color:#898989;
            }
        }
        .right{
            margin-top: 90rpx;
            display: inline-block;
            float: right;
            text-align: center;
            h4,.toLogin{
                font-size: 22rpx;
                color:#898989;
                margin-bottom: 66rpx;
            }
            .toLogin{
                width: 156rpx;
                height: 52rpx;
                border-radius: 26rpx;
                text-align: center;
                line-height: 52rpx;
                background: #e94a69;
                color:#fefefe;
                font-size:22rpx;
            }
            p{
                font-size: 32rpx;
                color:#e93746;
                font-weight: bold;
            }
            span{
                font-size: 28rpx;
                color:#898989;
            }
        }
    }
}

.list{
    background: white;
    margin-top: 20rpx;
    ul{
        margin-left:56rpx;
        li{
            border-bottom:1rpx #f0eff5 solid;
            img{
                display:inline-block;
                width: 40rpx;
                height: 40rpx;
                margin-right: 25rpx;
                position: relative;
                top: 10rpx;
            }
            span{
                font-size: 32rpx;
                color:#686868;
                line-height: 100rpx;
            }
            .right{
                float: right;
                margin-right: 58rpx;
                width: 18rpx;
                height: 32rpx;
                // line-height: 50rpx;
                margin-top: 20rpx;
            }
        }
    }
}
</style>
